import { Table, Pagination, Row, Col, Avatar, Tooltip } from "antd";
import { useModel } from "umi";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEyeOpened } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

const { Column } = Table;

const PersonUserPage = () => {
    const { graphqlFetchPlatform, windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { kuboUrl } = useModel("kubo");

    const state = useReactive({
        loading: false,
        appLoading: false,
        persons: [],
        selectedPerson: null,
        applications: [],
        pageSize: 20,
        page: 1,
    });

    const loadPersons = async () => {
        state.loading = true;
        let query = `query MyQuery { a:allPersonApplicationCustomers { totalCount nodes { pacStat pacCrti b:memberByPmUuid { pmAvat pmName pmRoge pmUuid } } } }`;
        let res = await graphqlFetchPlatform({ query, variables: {} });
        state.persons = res?.a?.nodes?.map(({ pacStat, pacCrti, b }) => ({ pacStat, pacCrti, ...b })) || [];
        state.selectedPerson === null ? (state.selectedPerson = state.persons.length && state.persons[0]) : null;
        state.loading = false;
    };

    useEffect(() => {
        loadPersons();
    }, []);

    const loadApplications = async () => {
        state.appLoading = true;
        state.appLoading = false;
    };

    useEffect(() => {
        state.selectedPerson?.miUuid && loadApplications();
    }, [state.selectedPerson]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={5}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>个人用户列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 1, height: cardBodyHeight - 52, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadPersons}></Button>
                        </ButtonGroup>
                    }
                    footerStyle={{ padding: 8, textAlign: "center" }}
                    footerLine={true}
                    footer={
                        <Pagination
                            total={state.totalCount}
                            pageSize={state.pageSize}
                            current={state.page}
                            showSizeChanger={false}
                            onChange={(page, pageSize) => (state.page = page)}
                        />
                    }
                >
                    <List
                        loading={state.loading}
                        dataSource={state.persons}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                style={{ padding: 10 }}
                                className={`list-item ${state.selectedPerson?.miUuid === item?.miUuid ? "list-item-selected" : ""}`}
                                header={
                                    <Avatar
                                        shape="square"
                                        size={20}
                                        src={kuboUrl && item.miAvat ? kuboUrl + item.miAvat : <Jdenticon value={item.miName || "-"} />}
                                    />
                                }
                                main={<div style={{ color: "var(--semi-color-text-0)", fontWeight: 500 }}>{item?.miName + " - " + item.miRoge}</div>}
                                onClick={() => (state.selectedPerson = item)}
                            ></List.Item>
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={19}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{state.selectedPerson?.miName} - 授权的应用列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                >
                    <Table
                        loading={state.loading}
                        size="small"
                        dataSource={state.applications}
                        rowKey="aiUuid"
                        bordered
                        pagination={false}
                        scroll={{ y: cardBodyHeight - 46 }}
                    >
                        <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                        <Column title="应用名称" dataIndex="aiName" align="left" />
                        <Column title="分类名称" dataIndex="aiClas" align="center" />
                        <Column title="适用对象" dataIndex="aiObje" align="center" />
                        <Column
                            title="登录状态"
                            dataIndex="aiLogn"
                            align="center"
                            width={100}
                            render={(_) => (_ === "localLogined" ? "本地登录" : "远程登录")}
                        />
                        <Column
                            title="开发组织"
                            dataIndex="aiSdna"
                            align="center"
                            width={100}
                            render={(_, r, i) => (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )}
                        />
                        <Column title="上下架状态" dataIndex="aiStat" align="center" width={100} />
                        <Column title="授权来源" dataIndex="paFrom" align="center" />
                        <Column title="授权日期" dataIndex="paStda" align="center" render={(_, r, i) => (_ && UTCTimeToLocal(_, "YYYY年MM月DD日")) || "无"} />
                        <Column title="结束日期" dataIndex="paEnda" align="center" render={(_, r, i) => (_ && UTCTimeToLocal(_, "YYYY年MM月DD日")) || "无"} />
                    </Table>
                </SemiCard>
            </Col>
        </Row>
    );
};

export default PersonUserPage;
